<template>
  <div class="GreetingCard2">
    <div class="partA" :style="tabBarShow ? '' : 'bottom: -200px;'">
      <div class="partA1" v-for="(item, index) in list" :key="index" @click="tabBtn(index)">
        <u-icon :name="item.icon" :color="tabIndex === index ? 'var(--main-color)' : '#898b8d'" size="22"></u-icon>
        <p class="partA2" :style="tabIndex === index ? 'color: var(--main-color);' : ''">{{ item.text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabBarShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      tabIndex: 0,
      list: [
        {
          text: '首页',
          icon: 'home-fill',
        },
        {
          text: '我的',
          icon: 'coupon-fill',
        },
      ],
    }
  },
  mounted() {
    if (sessionStorage.tabIndex) {
      this.tabBtn(parseInt(sessionStorage.tabIndex))
    }
  },
  methods: {
    tabBtn(i) {
      this.tabIndex = i
      sessionStorage.tabIndex = i
      this.$parent.pageSwich(i)
    },
  },
}
</script>

<style lang="scss" scoped>
.GreetingCard2 {
  .partA {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 98rpx;
    background: rgba(255, 255, 255, 1);
    z-index: 300;
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    transition: all 0.3s;
    .partA1 {
      font-size: 0;
      width: 40%;
      padding-top: 11rpx;
    }
    .partA2 {
      padding-top: 8rpx;
      font-size: 22rpx;
      line-height: 22rpx;
      color: #898b8d;
    }
  }
}
</style>
